<template>
    <div class="project">
        <div class="search">
            <div class="left">
                <!-- 项目名称 -->
                <div class="search_list">
                    <span class="search_text">项目名称：</span>
                    <el-input size="small" placeholder="输入" v-model="project_name"></el-input>
                </div>
            </div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
        <!--列表-->
        <div class="list blockMould project_list">
            <div class="list_head_button">
                <div class="search_button">
                    <el-button size="mini" type="warning" plain @click="dialogVisibleAdd = true">新增</el-button>
                </div>
                <div class="search_name">
                    <el-button size="mini" type="primary" @click="search_list">查询</el-button>
                    <el-button size="mini" @click="reset_list">重置</el-button>
                </div>
            </div>
            <el-table
                :header-cell-style="{background:'#F6F7FB',color:'#666666',height: '50px'}"
                :row-class-name="tableRowClassName"
                :data="projectList">
                <el-table-column
                    prop="id"
                    label="项目ID"
                    min-width="45">
                </el-table-column>
                <el-table-column
                    prop="projectName"
                    label="项目名称"
                    min-width="45">
                </el-table-column>
                <el-table-column
                    prop="enterpriseName"
                    label="所属药企"
                    min-width="80"
                    show-overflow-tooltip>
                </el-table-column>
                <el-table-column
                    prop="startTime"
                    label="项目开始时间"
                    min-width="75">
                </el-table-column>
                <el-table-column
                    prop="endTime"
                    label="项目结束时间"
                    min-width="75">
                </el-table-column>
                <el-table-column
                    label="操作"
                    min-width="55">
                    <template slot-scope="scope">
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="编辑" placement="bottom">
                            <el-button type="text" @click="edit_project_info(scope.row)">
                                <img src="../../assets/common/edit.svg" alt="">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="目标医院管理" placement="bottom">
                            <el-button type="text" @click="targetHospital(scope.row)">
                                <img src="../../assets/common/target_hospital.svg" alt="">
                            </el-button>
                        </el-tooltip>
                        <el-tooltip popper-class="operation_button_promit" effect="dark" content="删除" placement="bottom">
                            <el-button type="text" @click="delete_project(scope.row)">
                                <img src="../../assets/common/delete.svg" alt="">
                            </el-button>
                        </el-tooltip>
                    </template>
                </el-table-column>
            </el-table>
            <!--分页-->
            <pagination :page="page" @changeCurrentPage="handleCurrentChange" @changePageSize="handlePageSize"/>
        </div>
        <!--添加项目-->
        <el-dialog
        title="新增"
        :visible.sync="dialogVisibleAdd"
        width="526px"
        class="label_dialog"
        :before-close="closeAddDialog">
            <div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">所属药企：</span>
                    <el-select v-model="add_drug_firms" placeholder="请选择">
                    <el-option
                        v-for="item in drugs_list"
                        :key="item.id"
                        :label="item.enterpriseName"
                        :value="item.id">
                    </el-option>
                    </el-select>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">项目名称：</span>
                    <el-input class="project_input" v-model="add_project_name" placeholder="请输入项目名称"></el-input>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">开始时间：</span>
                    <el-date-picker
                        v-model="add_start_time"
                        type="date"
                        placeholder="选择开始日期"
                        @change="(value)=>addStartTime(value)"
                        :picker-options="pickerOptionsStart">
                    </el-date-picker>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">结束时间：</span>
                    <el-date-picker
                        v-model="add_end_time"
                        type="date"
                        placeholder="选择结束日期"
                        @change="(value)=>addEndTime(value)"
                        :picker-options="pickerOptionsEnd">
                    </el-date-picker>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelAddDialog">取消</el-button>
                <el-button type="primary" @click="add_project">确定</el-button>
            </span>
        </el-dialog>
        <!-- 编辑项目 -->
        <el-dialog
        title="编辑"
        :visible.sync="dialogVisibleEdit"
        width="526px"
        class="label_dialog"
        :before-close="closeEditDialog">
            <div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">所属药企：</span>
                    <el-select v-model="edit_drug_firms" placeholder="请选择">
                    <el-option
                        v-for="item in drugs_list"
                        :key="item.id"
                        :label="item.enterpriseName"
                        :value="item.id">
                    </el-option>
                    </el-select>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">项目名称：</span>
                    <el-input class="project_input" v-model="edit_project_name" placeholder="请输入项目名称"></el-input>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">开始时间：</span>
                    <el-date-picker
                        v-model="edit_start_time"
                        type="date"
                        placeholder="选择开始日期"
                        @change="(value)=>changeStartTime(value)"
                        :picker-options="pickerOptionsEditStart">
                    </el-date-picker>
                </div>
                <div class="search_list">
                    <span class="mandatory_logo">*</span>
                    <span class="search_text">结束时间：</span>
                    <el-date-picker
                        v-model="edit_end_time"
                        type="date"
                        placeholder="选择开始日期"
                        @change="(value)=>changeEndTime(value)"
                        :picker-options="pickerOptionsEditEnd">
                    </el-date-picker>
                </div>
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="cancelEditDialog">取消</el-button>
                <el-button type="primary" @click="edit_project">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
    import { api, baseAjax } from '@/api/api';
    import pagination from '../public/pagination';
    import {statusCode} from '../../utils/index';
    import {formatDate} from '../../utils/validate';
    export default {
        name: "projectManagement",
        components:{
            pagination
        },
        data() {
            return {
                //分页
                page: {
                    currentPage: 1,    //当前页
                    pageSize: 10,    //每页显示条数
                    totalPage: 0,   //总页数
                    total:null   //总条数
                },
                project_name:'',   //项目名称筛选
                projectList:[],
                dialogVisibleAdd:false,   //是否显示添加弹框
                dialogVisibleEdit:false,  //是否显示编辑弹框
                add_drug_firms:'',  //添加所属药企
                drugs_list:[],   //所属药企下拉框值
                add_project_name:'',  //添加项目名称
                add_start_time:'',  //添加开始日期
                add_end_time:'',   //添加结束日期
                edit_drug_firms:'',   //编辑所属药企
                edit_project_name:'',  //编辑项目名称
                edit_start_time:'',   //编辑开始时间
                edit_end_time:'',    //编辑结束时间
                edit_project_id:null,  //编辑项目id
                pickerOptionsStart: {  //添加开始时间
                    disabledDate:time=>{
                        if(this.add_end_time){
                            return time.getTime() > new Date(this.add_end_time).getTime()-24 * 60 * 60 * 1000;
                        }
                    }
                },
                pickerOptionsEnd:{  //添加结束时间
                    disabledDate:time=>{
                        if(this.add_start_time){
                            return time.getTime() < new Date(this.add_start_time).getTime()+24 * 60 * 60 * 1000;
                        }
                    }
                },
                pickerOptionsEditStart:{   //编辑开始时间
                    disabledDate:time=>{
                        if(this.edit_end_time){
                            return time.getTime() > new Date(this.edit_end_time).getTime();
                        }
                    }
                },
                pickerOptionsEditEnd:{   //编辑结束时间
                    disabledDate:time=>{
                        if(this.edit_start_time){
                            return time.getTime() < new Date(this.edit_start_time).getTime();
                        }
                    }
                }
            }
        },
        mounted(){
            this.get_project_list();//列表数据
            this.get_enterprise_list();//获取药企
        },
        methods: {
            //修改列表tr颜色
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                return 'success_row';
                }
                return '';
            },
            //改变当前页码
            handleCurrentChange(currentPage) {
                this.page.currentPage = currentPage;
                this.get_project_list();
            },
            //改变每页条数
            handlePageSize(pageSize){
                this.page.pageSize = pageSize;
                this.get_project_list();
            },
            //关闭添加弹框
            closeAddDialog(done){
                this.add_drug_firms = '';
                this.add_project_name = '';
                this.add_start_time = '';
                this.add_end_time = '';
                done();
            },
            //取消添加弹框
            cancelAddDialog(){
                this.dialogVisibleAdd = false;
                this.add_drug_firms = '';
                this.add_project_name = '';
                this.add_start_time = '';
                this.add_end_time = '';
            },
            //添加项目
            add_project(){
                let that = this;
                if(!this.add_drug_firms){
                    this.$alert('请选择"所属药企"');
                }else if(!this.add_project_name){
                    this.$alert('请填写"项目名称"');
                }else if(this.add_project_name.length > 20){
                    this.$alert('项目名称不能大于20个字');
                }else if(!this.add_start_time){
                    this.$alert('请选择"开始时间"');
                }else if(!this.add_end_time){
                    this.$alert('请选择"结束时间"');
                }else{
                    let enterpriseName = '';
                    this.drugs_list.forEach(item=>{
                        if(this.add_drug_firms == item.id){
                            enterpriseName = item.enterpriseName;
                        }
                    });
                    let data = {
                        endTime:formatDate(this.add_end_time),
                        enterpriseId:this.add_drug_firms,
                        enterpriseName:enterpriseName,
                        projectName:this.add_project_name,
                        startTime:formatDate(this.add_start_time)
                    };
                    baseAjax(api.add_project, data, (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){
                                that.$message.success('添加成功');
                                that.dialogVisibleAdd = false;
                                that.add_drug_firms = '';
                                that.add_project_name = '';
                                that.add_start_time = '';
                                that.add_end_time = '';
                                that.get_project_list();
                            }else{
                                that.$message.error('添加失败');
                            }
                        }
                    });
                }
            },
            //关闭编辑弹框
            closeEditDialog(done){
                this.edit_drug_firms = '';
                this.edit_project_name = '';
                this.edit_start_time = '';
                this.edit_end_time = '';
                this.edit_project_id = null;
                done();
            },
            //取消编辑弹框
            cancelEditDialog(){
                this.dialogVisibleEdit = false;
                this.edit_drug_firms = '';
                this.edit_project_name = '';
                this.edit_start_time = '';
                this.edit_end_time = '';
                this.edit_project_id = null;
            },
            //编辑项目信息
            edit_project_info(info){
                this.dialogVisibleEdit = true;
                this.edit_drug_firms = info.enterpriseId;
                this.edit_project_name = info.projectName;
                this.edit_start_time = info.startTime;
                this.edit_end_time = info.endTime;
                this.edit_project_id = info.id;
            },
            //编辑项目
            edit_project(){
                let that = this;
                if(!this.edit_drug_firms){
                    this.$alert('请选择"所属药企"');
                }else if(!this.edit_project_name){
                    this.$alert('请填写"项目名称"');
                }else if(this.edit_project_name.length > 20){
                    this.$alert('项目名称不能大于20个字');
                }else if(!this.edit_start_time){
                    this.$alert('请选择"开始时间"');
                }else if(!this.edit_end_time){
                    this.$alert('请选择"结束时间"');
                }else{
                    let edit_enterprise_name = '';
                    this.drugs_list.forEach(item=>{
                        if(that.edit_drug_firms == item.id){
                            edit_enterprise_name = item.enterpriseName;
                        }
                    });
                    let data = {
                        endTime:this.edit_end_time,
                        enterpriseId:this.edit_drug_firms,
                        enterpriseName:edit_enterprise_name,
                        id:this.edit_project_id,
                        projectName:this.edit_project_name,
                        startTime:this.edit_start_time
                    };
                    baseAjax(api.edit_project, data, (res)=>{
                        if(res.code === statusCode.success){
                            if(res.data == true){
                                that.$message.success('编辑成功');
                                that.dialogVisibleEdit = false;
                                that.edit_drug_firms = '';
                                that.edit_project_name = '';
                                that.edit_start_time = '';
                                that.edit_end_time = '';
                                that.edit_project_id = null;
                                that.get_project_list();
                            }else{
                                that.$message.error('编辑失败');
                            }
                        }
                    });
                    
                }
            },
            //删除项目
            delete_project(info){
                let that = this;
                api.delete_project = {
                    url:api.delete_project_url+'?id='+info.id,
                    method:api.delete_project.method
                };
                baseAjax(api.delete_project, '', (res)=>{
                    if(res.code === statusCode.success){
                        if(res.data == true){
                            this.$confirm('是否确认删除?', {
                                confirmButtonText: '确定',
                                cancelButtonText: '取消',
                                type: 'warning'
                            }).then(() => {
                                this.$message.success('删除成功');
                                 that.get_project_list();
                            }).catch(() => {
                                this.$message({
                                    type: 'info',
                                    message: '已取消删除'
                                });          
                            });
                        }else{
                            that.$message.error('项目下有代表和医生，请联系管理员进行操作');
                        }
                    }
                });



                
            },
            //目标医院
            targetHospital(info){
                this.$router.push({path:'/targetHospitalManagement',query:{project_id:info.id}});
            },
            //列表数据
            get_project_list(){
                let that = this;
                api.project_list = {
                    url:api.project_list_url+'?currentPage='+this.page.currentPage+'&totalPage='+this.page.totalPage+'&projectName='+this.project_name+'&pageSize='+this.page.pageSize,
                    method:api.project_list.method
                };
                baseAjax(api.project_list, '', (res)=>{
                    if(res.code === statusCode.success){
                        let {pageSize, totalPage, projectListValue, count} = res.data;
                        that.page.pageSize = pageSize;
                        that.page.totalPage = totalPage;
                        that.page.total = count;
                        that.projectList = projectListValue;
                    }
                });
            },
            //查询
            search_list(){
                this.handleCurrentChange(1);
            },
            //重置
            reset_list(){
                this.project_name = '';
            },
            //获取药企
            get_enterprise_list(){
                let that = this;
                baseAjax(api.enterprise_list, '', (res)=>{
                    if(res.code === statusCode.success){
                        that.drugs_list = res.data;
                    }
                });
            },
            //改变编辑选择开始时间
            changeStartTime(value){
                this.edit_start_time = formatDate(value);
            },
            //改变编辑选择结束时间
            changeEndTime(value){
                this.edit_end_time = formatDate(value);
            },
            addStartTime(val){
                this.add_start_time = val;
            },
            addEndTime(val){
                this.add_end_time = val;
            }
        }
    }
</script>

<style lang="less" scoped>
.project{
    font-family: PingFangSC-Regular, PingFang SC;
    .search {
        .left,.center{
            margin-right:24px;
        }
    }
    .project_list{
        /deep/.el-table{
            tbody{
                tr{
                    td:last-child{
                        .cell{
                            button:nth-last-child(2){
                                margin-left:20px;
                            }
                        }
                    }
                }
            }
        }
    }

    /deep/.el-dialog {
        .el-date-editor{
            .el-input__prefix{
                .el-input__icon{
                    line-height:32px;
                }
            }
            .el-input__suffix{
                .el-input__suffix-inner{
                    .el-input__icon{
                        line-height:32px;
                    }
                }
            }
        }
    }

    i {
      font-size: 20px;
    }
}
</style>
